<template>
  <div class="addAddress absolute addPhone">
    <div class="list">
      <div class="item acea-row row-between-wrapper">
        <div class="name">收货人手机号</div>
        <input
          type="tel"
          maxlength="11"
          placeholder="请填写手机号"
          v-model="userAddress.phone"
          required
        />
      </div>
    </div>
    <div></div>
    <!-- <div v-show="id" class="keepBnt" @click="submit()">完成</div> -->
    <div class="keepBnt" @click="confirm()">完成</div>
    <!-- 二次确认弹窗 -->
    <div class="confirmBox" v-show="isConfirm == '1'">
      <div class="ceng">
        <p class="confirmTltle">是否更新您填写的地址？</p>
        <div>
          <span class="NoConfirm" @click="NoConfirm()">暂不更新</span>
          <span class="confirm" @click="confirm()">确定更新</span>
        </div>
      </div>
    </div>
    <!-- <noData></noData> -->
    <!-- 二次确认弹窗end -->
  </div>
</template>
<script type="text/babel">
import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
import {  addressSave } from "@api/user";
import { getCity } from "@api/public";
import attrs, { required, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import { openAddress } from "@libs/wechat";
import { isWeixin } from "@utils";
import noData from "@components/noData";

export default {
  components: {
    CitySelect,
    noData
  },
  data() {
    return {
      show2: false,
      model2: "",
      district: [],
      id: 0,
      userAddress: {
        is_default: 1,
        real_name: "",
        detail: ""
      },
      address: {},
      isWechat: isWeixin(),
      ready: false,
      //二次确认
      isConfirm: "0",
      is_defaultType: "1"
    };
  },
  mounted: function() {
    // this.getUserAddress();
    // this.getCityList();
  },
  created() {
    let phone = this.$route.query.phone;
    phone ? (this.userAddress.phone = phone) : "";
  },
  methods: {
    onBlurInput() {
      window.scroll(0, 0);
    },
    NoConfirm() {
      this.isConfirm = "0";
      this.$router.go(-1);
    },
    async confirm() {
      let phone = this.userAddress.phone;
      try {
        await this.$validator({
          phone: [
            required(required.message("手机号")),
            chs_phone(chs_phone.message())
          ]
        }).validate({ phone });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      try {
        let that = this,
          data = {
            phone: phone
          };
        addressSave(data)
          .then(function() {
            that.isConfirm = "0";
            if (that.id) that.$dialog.toast({ mes: "修改成功" });
            else that.$dialog.toast({ mes: "添加成功" });
            that.$router.go(-1);
          })
          .catch(err => {
            that.$dialog.error(err.msg);
          });
      } catch (e) {
        this.$dialog.error(e.msg);
      }
    },
    getUserAddress: function() {
      if (!this.id) return false;
      if (this.$route.query.type == "-2") return false;
      let that = this;
      getAddress(that.id)
        .then(res => {
          console.log(res);
          that.userAddress = res.data;
          that.model2 =
            res.data.province + " " + res.data.city + " " + res.data.district;
          that.address.province = res.data.province;
          that.address.city = res.data.city;
          that.address.city_id = res.data.city_id;
          that.address.district = res.data.district;
        })
        .catch(err => {
          that.$dialog.error(err.msg);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.name {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  font-size: 0.28rem;
}
.confirmBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  .ceng {
    display: block;
    width: 6rem;
    height: 2.9rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.16rem;
    justify-content: center;
    margin: 50% auto 0;
    justify-items: center;
    .confirmTltle {
      width: 100%;
      height: 1.84rem;
      line-height: 1.84rem;
      text-align: center;
      font-size: 0.34rem;
      color: #333;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .NoConfirm {
      display: inline-block;
      width: 50%;
      height: 1.04rem;
      line-height: 1.04rem;
      text-align: center;
      font-size: 0.32rem;
      color: rgba(0, 0, 0, 0.5);
      border-right: 1px solid rgba(0, 0, 0, 0.2);
    }
    .confirm {
      display: inline-block;
      width: 50%;
      height: 1.04rem;
      line-height: 1.04rem;
      text-align: center;
      font-size: 0.32rem;
      color: rgba(68, 115, 225, 1);
    }
  }
}
.addPhone {
  width: 100%;
  height: 100%;
  .list {
    padding-bottom: 1.88rem;
    margin-top: 0.2rem;
    padding-top: 0.32rem;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 0.36rem;
      border-bottom: 1px solid #eaeaea;
      box-sizing: border-box;
      border-top: none;
      .name {
        width: 100%;
        margin-bottom: 0.28rem;
      }
      input {
        width: 100%;
        font-size: 0.32rem;
        font-weight: bold;
      }
    }
  }
  .keepBnt {
    position: static;
    width: 3.6rem;
    height: 0.76rem;
    margin: 2.6rem auto 0;
    border-radius: 0;
  }
}
</style>
